<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="col in columns">
            <!--首字母大写-->
            {{col.name}}
          </th>
          <!--添加操作按钮-->
          <th>
            Delete
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(index,entry) in dataList">
              <td v-for="col in columns">
                {{entry[col.name]}}
              </td>
          <!--添加删除按钮-->
          <td class="text-center">
            <button class="btn-danger" @click="deleteItem(entry)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!--打开新增 弹框-->
    <div class="container">
      <button @click="openNewItemDialog('Create New Item')">新增</button>
    </div>
    <!--使用引入组件-->
    <model-dialog :model="mode" :title="title" :fields="columns" :item="item" @create-item="createItem"/>

  </div>
</template>

<script>
  import modalDialog from '@/components/myDialog'
    export default {
        name: "grid-template",
        data() {
          return {
            mode : 0,
            title : '',
            item : {}//这个作为 新增对象的 对象容器
          }
        },
      //添加属性
      props:[
        'dataList','columns','searchKey'
      ],
      //注册组件
      components:{
          'model-dialog':modalDialog
      },
      methods:{
        openNewItemDialog:function (msg) {
          // 对话框的标题
          this.title = msg
          // mode = 1表示新建模式
          this.mode = 1
          // 初始化this.item
          this.item = {}
          // 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
          this.$emit('showDialog', true)
        },
        deleteItem:function (entry) {

        },
        createItem:function () {
          // 将item追加到dataList
          this.dataList.push(this.item)//item来自 对话框中初始化的 item
          // 广播事件，传入参数false表示隐藏对话框
          this.$emit('showDialog', false)
          // 新建完数据后，重置item对象
          this.item = {}
        }
      }
    }
</script>

<style scoped>

</style>
